<template>
  <el-dialog
    v-bind="$attrs"
    header-class="h-50px flex items-center border-0 border-b-1 border-slate-200 border-solid px-12px"
    footer-class=""
    body-class="overflow-y-auto flex-1 p-12px"
    v-model="modalDialogVisible"
    :show-close="false"
    :fullscreen="isFull"
    class="_modal flex flex-col"
    modal-class="_modal_filter"
    top="10vh"
    draggable
    append-to-body
  >
    <template #header>
      <div class="w-full flex justify-between items-center">
        <div>{{ $attrs.title }}</div>
        <div>
          <el-button circle size='default' text @click="toggleFull">
            <SvgIcon class="fs-16" v-if='isFull' icon="proicons:full-screen-minimize" />
            <SvgIcon v-else icon="ep:full-screen" class="fs-18" />
          </el-button>
          <span />
          <el-button circle size='default' text @click="close">
            <SvgIcon icon="ep:close" class="fs-18"/>
          </el-button>
        </div>
      </div>
    </template>
    <template #default>
      <el-scrollbar :max-height="isFull ? '100vh' : props.bodyMaxHeight + 'vh'">
        <slot></slot>
      </el-scrollbar>
    </template>
    <template #footer>
      <div v-if="$slots.footer" class="h-50px flex items-center justify-end border-0 border-t-1 border-slate-200 border-solid px-12px">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'

const emit = defineEmits(['register'])
const modalDialogVisible = ref(false)
emit('register', getCurrentInstance())
const isFull = ref(false)
const props = withDefaults(defineProps<{
  // 弹窗体最大高度
  bodyMaxHeight?: number
}>(), {
  bodyMaxHeight: 60
})

const toggleFull = () => {
  isFull.value = !isFull.value
}
const open = () => {
  modalDialogVisible.value = true
}
const close = () => {
  modalDialogVisible.value = false
}
defineExpose({ open, close })
</script>

<style>
._modal {
  --el-dialog-padding-primary: 0;
}
._modal_filter {
  backdrop-filter: blur(5px);
}
</style>